<template>
  <!-- 保养模板筛选框 -->
  <!-- 单选日期组件 -->
  <view class="dateFilter" :style="{ padding: noPadding ? '20rpx 0rpx;' : '20rpx 40rpx;' }">
    <view class="title">
      {{ title }}
      <text v-if="isMainPlan">{{ mainTips }}</text>
      <text v-else>(单选)</text>
    </view>
    <view class="filterContent">
      <view class="top" :style="isMainPlan ? 'margin-bottom: 2rpx' : ''">
        <view v-for="(item, index) in dateList" :key="index" class="top_item">
          <view :class="['tagItem', actValue == item.value ? 'act' : '']" @click="chooseDate(item, index)">
            {{ item.name }}
          </view>
        </view>
      </view>
      <view class="bottom" v-if="!hideTimeRange">
        <view :class="['customInput', 'tagItem', startTime ? 'act' : '']" @click="chooseCustomer">
          <input type="text" v-model="startTime" placeholder="开始时间" disabled />
        </view>
        <view class="line">-</view>
        <view :class="['customInput', 'tagItem', endTime ? 'act' : '']" @click="chooseCustomer">
          <input type="text" v-model="endTime" placeholder="结束时间" disabled />
        </view>
      </view>
      <slot name="bottom"></slot>
    </view>

    <!-- 自定义弹出框 -->
    <!-- <time-select
      :defTime="[startTime, endTime]"
      v-if="selectTimePopup"
      :beforeToday="true"
      :isChooseToday="true"
      @close="closeSelectTimePopup"
    ></time-select> -->
  </view>
</template>

<script>
import { elevatorType, contentTemp } from '@/apis/maintains.js';
import timeSelect from '@/pages/index/components/timeSelect.vue';
import { getNowTime, getBeforeDate } from '@/utils/utils.js';
export default {
  components: {
    timeSelect,
  },
  props: {
    optionKey: {
      type: String,
      default: '',
    },
    title: {
      type: String,
      default: '维保签字时间',
    },
    dateList: {
      type: Array,
      default: () => {
        return [
          { name: '今天', value: 1 },
          { name: '近7天', value: 7 },
          { name: '近30天', value: 30 },
        ];
      },
    },
    dateObj: {
      type: Object,
    },
    isResetDate: {
      type: Boolean,
    },
    isMainPlan: {
      type: Boolean,
      default: false,
    },
    hideTimeRange: {
      type: Boolean,
      default: false,
    },
    mainTips: {
      type: String,
      default: ''
    },
    noPadding: {
      type: Boolean,
      default: false,
    }
  },
  data() {
    return {
      actValue: '',
      startTime: '',
      endTime: '',
      selectTimePopup: false,
    };
  },

  created() {
    uni.$on('closeTimeSelect', (res) => {
      if (res.optionKey != this.optionKey) {
        return;
      }
      console.log('closeTimeSelect-closeTimeSelect-closeTimeSelect');
      let { start, end } = res;
      this.startTime = start;
      this.endTime = end;
      this.selectTimePopup = false;
      this.$emit('getDate', this.tranformDate());
    });
    // 保养月历页面用于选中时间回显
    uni.$on('closeTimeSelectPlan', (res) => {
      console.log('closeTimeSelectPlan-closeTimeSelectPlan-closeTimeSelectPlan');
      let { start, end } = res;
      this.startTime = start;
      this.endTime = end;
      this.actValue = res.value;
      this.$emit('getDate', this.tranformDate());
    });
  },
  beforeDestroy() {
    uni.$off('closeTimeSelect');
    uni.$off('closeTimeSelectPlan');
  },
  methods: {
    // 初始化日期组件
    initDate(res) {
      this.actValue = res.value;
      if (!res.value) {
        this.startTime = (res.startTime || '').split(' ')[0];
        this.endTime = (res.endTime || '').split(' ')[0];
      } else {
        this.startTime = '';
        this.endTime = '';
      }
    },
    chooseDate(e, i) {
      // 保养月历页面
      if (this.isMainPlan) {
        this.actValue = e.value;
        this.startTime = this.endTime = '';
        if (e.value === 10) {
          this.chooseCustomer();
          return;
        }
        this.$emit('getDate', this.tranformDate());

        return;
      }
      // 如果再次选择自己置空
      if (e.value == this.actValue) {
        this.actValue = '';
        this.$emit('getDate', { startTime: '', endTime: '' });
      } else {
        this.actValue = e.value;
        this.startTime = this.endTime = '';
        this.$emit('getDate', this.tranformDate());
      }
    },
    tranformDate() {
      let obj = {};
      // 如果是自定义日期,直接返回
      if (!this.actValue || this.actValue === 10) {
        obj = { startTime: this.startTime, endTime: this.endTime, value: this.actValue, optionKey: this.optionKey };
      } else {
        obj = {
          startTime: getBeforeDate(this.actValue),
          endTime: getBeforeDate(1),
          value: this.actValue,
          optionKey: this.optionKey
        };
      }
      // console.log(obj,"返回的日期数");
      return obj;
    },
    // 点击自定义日期
    chooseCustomer() {
      if (this.isMainPlan) {
        this.$emit('customerOpenTime', { isState: true, keys: this.optionKey });
        return;
      }
      this.actValue = '';
      this.selectTimePopup = true;
      uni.$emit('getCustomerSwitch', this.selectTimePopup, this.optionKey);
    },
    // 自定义日期确定
    closeSelectTimePopup(res) {
      if (res) {
        let start = '';
        let end = '';

        if (res.indexOf('-') != -1) {
          const timeArr = res.split('-');
          start = timeArr[0].replaceAll('.', '-');
          end = timeArr[1].replaceAll('.', '-');
        } else {
          const time = res.replaceAll('.', '-');
          start = time;
          end = time;
        }
        const nowDay = getNowTime();
        let nowtime = new Date(nowDay).getTime();
        let starttime = new Date(start).getTime();
        let endtime = new Date(end).getTime();
        // if (endtime >= nowtime) {
        // 	console.log('包含今天');
        // 	uni.showToast({
        // 		title: '自定义日期范围须小于今天',
        // 		icon: 'none'
        // 	});
        // 	return;
        // }

        this.startTime = start;
        this.endTime = end;
        this.actValue = '';
        this.$emit('getDate', this.tranformDate());
      } else {
      }
      this.selectTimePopup = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.dateFilter {
  // padding: 30rpx;
  // margin-top: 30rpx;
  padding: 20rpx 40rpx;

  .title {
    color: #333;
    font-size: 30rpx;
    font-weight: 600;

    text {
      color: #999;
      font-size: 28rpx;
      font-weight: normal;
    }
  }

  .filterContent {
    .tagItem {
      width: 216rpx;
      height: 48rpx;
      border: 2rpx solid #cccccc;
      border-radius: 8rpx;
      text-align: center;
      line-height: 48rpx;
      color: #666;
      font-size: 28rpx;
      overflow: hidden;
      /*文本超出隐藏*/
      text-overflow: ellipsis;
      /*文本超出显示省略号*/
      white-space: nowrap;
      box-sizing: border-box;
    }

    .act {
      color: #0091ff;
      background-color: #fff;
      border-color: #0091ff;
    }

    .top {
      display: flex;
      //justify-content: space-between;
      flex-wrap: wrap;
      margin: 16rpx 0;

      .top_item {
        width: 33.3%;
        display: flex;
        margin-bottom: 16rpx;
      }

      .top_item:nth-child(3n) {
        justify-content: flex-end;
      }

      .top_item:nth-child(3n+5),
      .top_item:nth-child(2) {
        justify-content: center
      }
    }

    .bottom {
      display: flex;
      justify-content: space-between;

      .customInput {
        flex: 1;
        margin-right: 0;

        input {
          width: 100%;
          height: 100%;
        }
      }

      .line {
        width: 68rpx;
        display: flex;
        justify-content: center;
        color: #999;
        align-items: center;
      }
    }
  }

  .main {
    display: flex;
  }

  .left {
    background: #f6f6f6;

    .leftItem {
      width: 232rpx;
      // height: 80rpx;
      padding: 20rpx 46rpx;
      display: flex;
      box-sizing: border-box;
      justify-content: center;
      align-items: center;
      background: #f6f6f6;
      font-size: 28rpx;
      color: #666;
      position: relative;
    }

    .redDot {
      width: 10rpx;
      height: 10rpx;
      border-radius: 50%;
      background-color: #e02020;
      position: absolute;
      right: 0;
      top: 0;
    }
  }

  .right {
    background-color: #fff;
    width: calc(100% - 232rpx);
    padding-left: 30rpx;

    .rightContent {
      display: flex;
      width: 100%;
      flex-wrap: wrap;
    }

    .tagItem {
      width: 208rpx;
      height: 48rpx;
      border: 2rpx solid #cccccc;
      border-radius: 8rpx;
      text-align: center;
      line-height: 48rpx;
      margin-bottom: 20rpx;
      color: #666;
      font-size: 28rpx;
      padding: 0 4rpx;
      overflow: hidden;
      /*文本超出隐藏*/
      text-overflow: ellipsis;
      /*文本超出显示省略号*/
      white-space: nowrap;
    }

    .tagItem:nth-child(2) {
      margin: 0 20rpx;
    }

    .activeTage {
      border-color: #0091ff;
      color: #0091ff;
    }
  }

  .empty {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.begin-time {
  padding: 16rpx 0;
  color: #333333;

  &>text:first-child {
    color: #666666;
  }
}
</style>
